<template>
    <div>
        <div>条码相对打印画布位置(mm)</div>
        <div class="rx-content">
            <div style="margin-right: 10px">
                <a-select v-model="setting.cross" style="width: 109px" :getPopupContainer="p=>p.parentNode"
                          allowClear>
                    <a-select-option v-for="obj in crossList" :value="obj">
                        {{ obj }}
                    </a-select-option>
                </a-select>
            </div>
            <div>
                <a-input-number v-model="setting.crossNumber" :min="1"/>
            </div>
        </div>
        <div class="rx-content">
            <div style="margin-right: 10px">
                <a-select v-model="setting.anyway" style="width: 109px" :getPopupContainer="p=>p.parentNode"
                          allowClear>
                    <a-select-option v-for="obj in anywayList" :value="obj">
                        {{ obj }}
                    </a-select-option>
                </a-select>
            </div>
            <div>
                <a-input-number v-model="setting.anywayNumber" :min="1"/>
            </div>
        </div>
        <a-form-model layout="vertical">
            <a-row style="margin-top: 15px;margin-bottom: 0px">
                <a-col :span="12">
                    <a-form-item style="width: 140px;padding-bottom: 0px;margin-bottom: 15px" label="条码宽度(mm)">
                        <a-input-number v-model="setting.width" :min="1"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item style="width: 150px;padding-bottom: 0px;margin-bottom: 15px" label="条码高度(mm)">
                        <a-input-number v-model="setting.height" :min="1"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <div >
                <div class="rx-custom">
                    <div class="rx-custom-le">自定义内容</div>
                    <div class="rx-custom-ri" @click="dataShow=true">+数据项</div>
                </div>
                <a-textarea
                    style="margin-top: 10px"
                    v-model="setting.customContent"
                    placeholder="输入自定义内容"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
            </div>
        </a-form-model>
        <a-modal
            title="自定义内容"
            :visible="dataShow"
            @cancel="dataShow = false"
            @ok="dataShow = false"
            :zIndex="5000">
            <div class="rx-customContent" v-for="(item,index) in boList" :key="index">
                <div class="rx-customContent-item" v-for="attr in item.children" v-if="item.type=='main'" :key="attr.alias">
                    <div class="collapse-list-filter" @click="changeContent(attr)">{{ attr.title }}</div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "BarSetting",
    props:{
        //条码设定
        setting:{
            type:Object
        },
        //业务模型数据。
        boList:{
            type: Array
        }
    },
    data(){
        return {
            crossList: ['right', 'left'],
            anywayList: ['top', 'bottom'],
            dataShow: false

        }
    },
    methods:{
        changeContent(item){
            let html = "${data." + item.name + "}"
            this.setting.customContent = this.setting.customContent+html
        },

    }
}
</script>

<style scoped>
.rx-content{
  display: flex;
  margin-bottom: 15px;
}
</style>